<template>
  <view class="page">
    <view class="container" :style="{ marginTop: keyboardHeight > 0 ? -keyboardHeight + 'px' : '0' }">
      <view class="login-card">
        <view class="login-header">
          <text class="welcome-text">欢迎回来</text>
          <text class="subtitle-text">请登录您的账户继续使用</text>
        </view>

        <form class="login-form" @submit.prevent="onLogin">
          <view class="form-group">
            <text class="input-label">账号</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'username' }">
              <image class="input-icon" src="/static/icon/head.png" mode="aspectFit" />
              <input 
                id="username"
                type="text"
                placeholder="请输入用户名或邮箱"
                v-model="form.account"
                @focus="onInputFocus('username')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="form-group">
            <text class="input-label">密码</text>
            <view class="input-container" :class="{ 'focused': focusedInput === 'password' }">
              <image class="input-icon" src="/static/icon/lock.png" mode="aspectFit" />
              <input 
                id="password"
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
                @focus="onInputFocus('password')"
                @blur="onInputBlur"
              />
            </view>
          </view>

          <view class="action-row">
            <text class="forgot-password" @click="onForgot">忘记密码?</text>
          </view>

          <view v-if="statusMessage" :class="['status-message', statusType]">
            {{ statusMessage }}
          </view>

          <button class="login-button" :class="{ 'loading': isLoading }" @click="onLogin">
            {{ isLoading ? '登录中...' : '登录' }}
          </button>

          <view class="signup-link">
            还没有账户? <text @click="onRegister">立即注册</text>
          </view>
        </form>
        
        <view class="skip-container">
          <text class="skip-link" @click="onSkip">跳过登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        account: '',
        password: ''
      },
      focusedInput: '',
      statusMessage: '',
      statusType: '',
      isLoading: false,
      keyboardHeight: 0
    }
  },
  onLoad() {
    // 监听键盘高度变化
    uni.onKeyboardHeightChange((res) => {
      this.keyboardHeight = res.height;
    });
  },
  methods: {
    onInputFocus(inputName) {
      this.focusedInput = inputName
    },
    onInputBlur() {
      this.focusedInput = ''
    },
    onRegister() {
      uni.navigateTo({
        url: '/pages/login/register'
      })
    },
    onForgot() {
      uni.showToast({
        title: '忘记密码功能待实现',
        icon: 'none'
      })
    },
    onSkip() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    async onLogin() {
      if (!this.form.account || !this.form.password) {
        this.showError('请输入账号和密码')
        return
      }

      this.isLoading = true
      this.statusMessage = ''

      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        this.showSuccess('登录成功！正在跳转...')
        // 这里添加实际的登录逻辑
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1000)
      } catch (error) {
        this.showError('登录失败，请重试')
      } finally {
        this.isLoading = false
      }
    },
    showError(message) {
      this.statusMessage = message
      this.statusType = 'error'
      setTimeout(() => {
        this.statusMessage = ''
      }, 3000)
    },
    showSuccess(message) {
      this.statusMessage = message
      this.statusType = 'success'
    }
  }
}
</script>

<style>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e6f2ff 0%, #c2e1ff 100%);
  padding: 30rpx;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-card {
  width: 100%;
  max-width: 750rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(44, 106, 160, 0.1);
  backdrop-filter: blur(10rpx);
}

.login-header {
  text-align: center;
  margin-bottom: 40rpx;
}



.welcome-text {
  display: block;
  font-size: 48rpx;
  color: #2c6aa0;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.subtitle-text {
  display: block;
  font-size: 28rpx;
  color: #5a7d9a;
  margin-bottom: 40rpx;
}

.form-group {
  margin-bottom: 25rpx;
}

.input-label {
  display: block;
  color: #4a7ba6;
  font-size: 28rpx;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.input-container {
  position: relative;
  transition: all 0.3s ease;
}

.input-container.focused {
  transform: scale(1.02);
}


.input-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 44rpx;
  height: 44rpx;
}

.input-container input {
  width: 82%;
  height: 90rpx;
  padding: 0 30rpx 0 90rpx; /* 留出图标位置 */
  border: 2rpx solid #c2d9f0;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.8);
  color: #2c6aa0;
  font-size: 30rpx;
  transition: all 0.3s ease;
}

.input-container.focused input {
  background: rgba(255, 255, 255, 0.95);
  border-color: #4a90e2;
  box-shadow: 0 0 0 4rpx rgba(74, 144, 226, 0.2);
}

.action-row {
  display: flex;
  justify-content: flex-end;
  margin: 20rpx 0 30rpx;
}

.forgot-password {
  color: #4a90e2;
  font-size: 26rpx;
}

.status-message {
  text-align: center;
  margin: 20rpx 0;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 26rpx;
}

.status-message.error {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 2rpx solid rgba(231, 76, 60, 0.2);
}

.status-message.success {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 2rpx solid rgba(46, 204, 113, 0.2);
}

.login-button {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #4a90e2 0%, #2c6aa0 100%);
  border: none;
  border-radius: 16rpx;
  color: white;
  font-size: 32rpx;
  font-weight: 600;
  margin: 20rpx 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6rpx 20rpx rgba(74, 144, 226, 0.3);
  transition: all 0.3s ease;
}

.login-button.loading {
  opacity: 0.8;
  pointer-events: none;
}

.login-button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(74, 144, 226, 0.2);
}

.signup-link {
  text-align: center;
  color: #5a7d9a;
  font-size: 26rpx;
  margin-top: 20rpx;
}

.signup-link text {
  color: #4a90e2;
  font-weight: 500;
}

.skip-container {
  text-align: center;
  margin-top: 30rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #e0e0e0;
}

.skip-link {
  color: #909399;
  font-size: 26rpx;
  text-decoration: underline;
}

@media screen and (min-width: 768rpx) {
  .login-card {
    padding: 60rpx 50rpx;
  }
}
</style>
